<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
      <v-axis
        dataKey="value"
        :zIndex="2"
        :line="null"
        :label="axisLabel"
        :tickLine="null"
        :grid="null"
      ></v-axis>
      <v-axis dataKey="1" :show="false"></v-axis>
      <v-series
        gemo="point"
        position="value*1"
        shape="pointer"
        color="#1890FF"
        :active="false"
      ></v-series>
      <v-guide
        type="line"
        :start="lineGuide1Start"
        :end="lineGuide1End"
        :lineStyle="lineGuide1LineStyle"
      ></v-guide>
      <v-guide
        type="line"
        :start="lineGuide2Start"
        :end="lineGuide2End"
        :lineStyle="lineGuide2LineStyle"
      ></v-guide>
      <v-guide
        type="line"
        :start="lineGuide3Start"
        :end="lineGuide3End"
        :lineStyle="lineGuide3LineStyle"
      ></v-guide>
      <v-guide
        type="arc"
        :zIndex="0"
        :top="false"
        :start="arcGuide1Start"
        :end="arcGuide1End"
        :vStyle="arcGuide1Style"
      ></v-guide>
      <v-guide
        type="arc"
        :zIndex="1"
        :start="arcGuide2Start"
        :end="arcGuide2End"
        :vStyle="arcGuide2Style"
      ></v-guide>
      <v-guide
        type="html"
        :position="htmlGuidePosition"
        :html="htmlGuideHtml"
      ></v-guide>
    </v-chart>
  </div>
</template>

<script>
import { registerShape } from 'viser-vue';

registerShape('point', 'pointer', {
  draw(cfg, container) {
    let point = cfg.points[0]; // 获取第一个标记点
    point = this.parsePoint(point);
    const center = this.parsePoint({ // 获取极坐标系下画布中心点
      x: 0,
      y: 0
    });
    // 绘制指针
    container.addShape('line', {
      attrs: {
        x1: center.x,
        y1: center.y,
        x2: point.x,
        y2: point.y + 15,
        stroke: cfg.color,
        lineWidth: 5,
        lineCap: 'round'
      }
    });
    return container.addShape('circle', {
      attrs: {
        x: center.x,
        y: center.y,
        r: 9.75,
        stroke: cfg.color,
        lineWidth: 4.5,
        fill: '#fff'
      }
    });
  }
});

const scale = [{
  dataKey: 'value',
  min: 0,
  max: 9,
  ticks: [2.25, 3.75, 5.25, 6.75],
  nice: false
}];

const data = [
  { value: 6 }
];

export default {
  data() {
    return {
      height: 400,
      data: data,
      scale: scale,

      axisLabel: {
        offset: -20,
        formatter: (val) => {
          if (val === '2.25') {
            return '差';
          } else if (val === '3.75') {
            return '中';
          } else if (val === '5.25') {
            return '良';
          }
          return '优';
        },
        textStyle: {
          fontSize: 18,
          textAlign: 'center'
        }
      },

      lineGuide1Start: [3, 0.905],
      lineGuide1End: [3.0035, 0.85],
      lineGuide1LineStyle: {
        stroke: '#19AFFA',
        lineDash: null,
        lineWidth: 3
      },

      lineGuide2Start: [4.5, 0.905],
      lineGuide2End: [4.5, 0.85],
      lineGuide2LineStyle: {
        stroke: '#19AFFA',
        lineDash: null,
        lineWidth: 3
      },

      lineGuide3Start: [6, 0.905],
      lineGuide3End: [6.0035, 0.85],
      lineGuide3LineStyle: {
        stroke: '#19AFFA',
        lineDash: null,
        lineWidth: 3
      },

      arcGuide1Start: [0, 0.945],
      arcGuide1End: [9, 0.945],
      arcGuide1Style: {
        stroke: '#CBCBCB',
        lineWidth: 18,
      },

      arcGuide2Start: [0, 0.945],
      arcGuide2End: [data[0].value, 0.945],
      arcGuide2Style: {
        stroke: '#1890FF',
        lineWidth: 18,
      },

      htmlGuidePosition: ['50%', '95%'],
      htmlGuideHtml: `
        <div style="width: 300px;text-align: center;">
          <p style="font-size: 20px;color: #545454;margin: 0;">合格率</p>
          <p style="font-size: 36px;color: #545454;margin: 0;">${data[0].value * 10}%</p>
        </div>
      `,
    };
  },
};
</script>
